<template>

  <div class="main-content" style="width: 60%">

    <el-row :gutter="10">
      <el-col @click="goPage('/front/ActivityDetail?id='+item.id)" :span="8" style="cursor: pointer" v-for="item in data.tableData" :key="item.id">
        <div class="card" style="margin-bottom: 10px">
          <img :src="item.img"  style="width: 100%; height: 200px"/>
          <div style="margin: 10px 0;">
            <el-tag type="primary" style="bottom: 3px;position: relative" v-if="item.status === '进行中'">{{item.status}}</el-tag>
            <el-tag type="warning" style="bottom: 3px;position: relative" v-if="item.status === '未开始'">{{item.status}}</el-tag>
            <el-tag type="danger"  style="bottom: 3px;position: relative" v-if="item.status === '已结束'">{{item.status}}</el-tag>
            <span style="font-size: 20px;margin-left: 10px">{{item.name}}</span>
          </div>
          <div class="line2" style="color: #666;margin-bottom: 5px">{{item.descr}}</div>
          <div style="color: #666"><el-icon><Calendar /></el-icon> {{item.start}} ~ {{item.end}}</div>
        </div>
      </el-col>
    </el-row>
    <div style="margin: 15px 0" v-if="data.total">
      <el-pagination  @current-change="load" layout="total,prev,pager,next" background :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total" />
    </div>
  </div>

</template>
<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";

const data=reactive({
  tableData:[],
  pageNum:1,
  pageSize:6,
  total:0,
})

const goPage = (path) => {
  location.href=path
}

const load = () =>{
  request.get('/activity/selectPage',{
    params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
    }
  }).then(res=>{
    if(res.code === "200"){
      data.tableData=res.data?.list || []
      data.total=res.data?.total
    }
  })
}
load()
</script>